<template>
  <el-tabs v-model="editableTabsValue">
    <el-tab-pane
      v-for="(item, index) in names"
      :key="item"
      :label="item"
      :name="item"
    >
    </el-tab-pane>
    <component :is="com"></component>
  </el-tabs>
</template>

<script>
const req = require.context('./views', true, /.*?(index\.vue)$/, 'lazy');
const names = req.keys().map(i => {
  // ./excel2Table/index.vue
  return i.replace('./', '').replace('/index.vue', '')
})
export default {
  name: "UtilsView",
  // components,
  data() {
    return {
      editableTabsValue: names[0],
      com: null,
      names,
    }
  },
  watch: {
    editableTabsValue: {
      handler(){
        this.getComponent()
      },
      immediate: true
    }
  },
  methods: {
    getComponent() {
      req(`./${this.editableTabsValue}/index.vue`).then(res => {
        this.com = res.default
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>
